<template>
	<!--编辑小组 | 编辑供应商-->
	<view class="page-content">
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<!--动态-->
			<template v-if="datalist && datalist.length > 0 ">
				<block v-for="(item,index) in datalist" :key="index">
					<view class="body-box">
						<view class="body-box-l">{{item.name}}</view>
						<view class="body-box-r">
							<image class="box-icon" :src="$mAssetsPath.icon_bianji" @click="toedit('tip',item.id)"></image>
							<image class="box-icon" :src="$mAssetsPath.icon_shanchu" @click="deletes('tip',item.id)"></image>
						</view>
					</view>
				</block>
				<!-- 上拉加载 -->
				<view class="det-con-more">
					<load-more :loadmore="load_more1"></load-more>
				</view>
			</template>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
			<w-popup :show="showtip" :type="type1" @change="change1">
				<view class="w-tip">
					<view class="w-tit" v-if="tipType===1 || tipType===2">{{tipType===1?'编辑':tipType===2?'新增':''}}</view>
					<view class="w-con">
						<view class="input-row" v-if="tipType===1 || tipType===2">
							<input class="input-row-w" type="text" v-model="searchVal" placeholder="请输入编辑内容"
								confirm-type="search" placeholder-style="color:#999"></input>
							<image class="icon-tb3" v-if="searchVal!=''" @click.stop="clear"
								:src="$mAssetsPath.icon_qingchu"></image>
						</view>
						<view class="txt-row" v-if="tipType===3">是否确认删除？</view>
					</view>
					<view class="w-but">
						<view class="w-but-txt" @click="cancel('tip')">取消</view>
						<view class="w-but-txt" @click="confirm">确认</view>
					</view>
				</view>
			</w-popup>
		</scroll-view>
	</view>
</template>

<script>
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import wPopup from '@/components/w-popup/w-popup2.vue';
	export default{
		components: {
			loadMore,wPopup
		},
		data(){
			return {
				tipType:0,  // 1-编辑 2-新增 3-删除
				searchVal:'',
				showtip: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				datalist:[
					{
						id:1,
						name:'供应商A'
					},
					{
						id:2,
						name:'供应商B'
					},
					{
						id:3,
						name:'供应商C'
					},
					{
						id:4,
						name:'供应商D'
					}
				],
				usetype:'', //c-公司  d-供应商
			}
		},
		onLoad(option){
			console.log(222,option)
			if(option.type==='c'){
				this.usetype = option.type;
			}else if(option.type==='d'){
				this.usetype = option.type;
				uni.setNavigationBarTitle({
					title: '编辑供应商'
				});
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(23,e)
			if (e.index == 0) {
				this.tipType = 2;
				this.showtip = true;
				this.content1 = 'center';
				this.type1 = 'center';
			}
		},
		methods:{
			toedit(type,id){
				this.tipType = 1;
				this['show' + type] = true;
				this.content1 = 'center';
				this.type1 = 'center';
			},
			deletes(type,id){
				this.tipType = 3;
				this['show' + type] = true;
				this.content1 = 'center';
				this.type1 = 'center';
			},
			loadmore(){
				
			},
			//确认
			confirm(){
				
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false
				}
			},
			//取消
			cancel(type) {
				this['show' + type] = false
			},
			//清空
			clear() {
				this.searchVal = '';
			}
		}
	}
</script>

<style lang="scss">
	/* 提示窗口 */
	.w-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 70vw;
		border-radius: 10rpx;
		background-color: #fff;
		box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 30rpx auto 0;
	
		.w-tit {
			font-size: 36rpx;
			font-weight: bold;
			color: $font-color-3;
			line-height: 60rpx;
			height: 60rpx;
			margin-top: 20rpx;
			text-align: center;
		}
	
		.w-but {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			color: $font-color-b3;
			height: 84rpx;
			line-height: 84rpx;
	
			.w-but-txt {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #f5f5f5;
			}
	
			.w-but-txt:last-of-type {
				border-right: none;
			}
		}
	
		.w-con {
			display: flex;
			text-align: center;
			font-weight: 400;
			padding: 60rpx 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.txt-row{
				width: 100%;
				text-align: center;
				font-size: 32rpx;
				color: $font-color-3;
			}
	
			.input-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 66rpx;
				background: #fff;
				border-radius: 10rpx;
				background: $uni-bg-color-grey;
	
				.icon-tb3 {
					width: 34rpx;
					height: 34rpx;
					margin: 0 20rpx;
				}
	
				.input-row-w {
					padding-left: 30rpx;
					text-align: left;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 20px;
					color: $font-color-9;
					width: calc(100% - 74rpx);
				}
			}
		}
	}
	.page-content{
		width: 100vw;
		height: 100%;
		background: $uni-bg-color-grey;
		.page-body{
			display: flex;
			height: 100%;
			.body-box{
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: $uni-bg-color;
				padding: 30rpx;
				border-bottom: 1rpx solid #f5f5f5;
				.body-box-l{
					font-size: 32rpx;
					font-weight: 400;
					color: $font-color-3;
				}
				.body-box-r{
					display: flex;
					align-items: center;
					.box-icon{
						margin-left: 40rpx;
						width: 34rpx;
						height: 34rpx;
					}
				}
			}
		}
	}
	/* .page-content::before{
	  content: '';
	  position: fixed;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 2rpx;
	  background-color: #F8F8F8;
	  z-index: 9999;
	} */
</style>
